
<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 14:58:04
 * @LastEditors: yuxi
 * @LastEditTime: 2023-08-03 20:01:34
-->
<template>
  <div class="map-container">
    <MiningMap :center="center" :zoom="zoom">
      <MiningTiandituLayer :ak="key" @ready="ready"></MiningTiandituLayer>
      <MiningWMSLayer :url="url" :layerId="layerId"></MiningWMSLayer>
    </MiningMap>
  </div>
</template>

<script>
import MiningMap from 'mining-map/Map'
import MiningTiandituLayer from 'mining-map/Layers/TiandituLayer'
import MiningWMSLayer from 'mining-map/Layers/WMSLayer'
import { TiandituKey } from '@/config/config.js';

export default {
  name: 'WMSLayerDemo',
  title: 'WMSLayer',
  parentTitle: '图层',
  components: {
    MiningMap,
    MiningTiandituLayer,
    MiningWMSLayer
  },
  data () {
    return {
      // url: 'http://124.71.237.248:8080/geoserver/city/wms',
      url: 'http://116.196.107.252:8080/geoserver/mkdt_baode/wms',
      layerId: 'mkdt_baode:规划设计巷道-lines',
      center: [106, 34],
      zoom: 5,
      key: TiandituKey
    }
  },
  methods: {
    ready () {

    }
  }

}
</script>

<style>
body,
html {
  padding: 0;
  margin: 0;
}

.map-container {
  width: 100%;
  height: 100vh;
  text-align: left;
}
</style>